<template>
    <div id="page">
        <div id="topmenu" style="padding-left: 200px;align-items: center;justify-content: center;">
            <ul style="list-style: none;float: right;margin-right: 20px;" class="top-nav">
                <li style="display: flex;"><span style="margin-left: 4px;"
                                                 onclick="window.location.href='/logout.html'">退出登陆</span></li>
            </ul>
        </div>
        <div id="user-info" v-cloak
             style="position: absolute;width: 200px;height: 50px;color: #ffffff;align-items: center">
            <div style="margin-top: 30px;text-align: center;cursor: pointer;"><img src="/imgs/default.png" width="30px"
                <span style="margin: 0 8px;">{{user.userName}}</span>
            </div>
        </div>
        <Sidebar></Sidebar>
        <div id="userbar" v-if="$route.name != 'setting'"
             style="height: calc(100% - 30px);width: calc(100% - 200px);background-color: #f7f7f7;position: absolute;left: 200px;top: 30px;border-top-left-radius: 8px;">
            <router-view :user="user"></router-view>
        </div>
    </div>
</template>

<script>

    import Sidebar from './Sidebar'
    export default {
        name: 'System',
        data () {
            return {
                user: {userName: '-'}
            }
        }, directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        components: {Sidebar},
        methods: {
        },
        mounted(){
            let that = this;
            $.post('/session/info', {}, function (result) {
                that.user = result;
            });
        },
    }
</script>

<style scoped>
</style>
